<template>
  <div class="search-table">
    <el-row :gutter="20">
      <el-col :span="4">
        <el-table
          ref="singleTable"
          :data="options"
          highlight-current-row
          border
          @row-click="handleCurrentClick"
          style="width: 100%"
          :header-row-style="headerRow"
          :header-cell-style="headerRow">
          <el-table-column
            property="value"
            label="关键词"
            align="center">
            <template slot-scope="scope">
              <span v-html="scope.row.label"></span>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="20">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="热点人物" name="people">
            <el-table
              v-if="activeName === 'people'"
              :data="tablePeopleData"
              stripe
              style="width: 100%"
              v-loading="loadingOne">
              <el-table-column
                type="index"
                label="排名"
                :index="1">
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                align="center">
              </el-table-column>
              <el-table-column
                prop="num"
                label="全网信息量"
                align="center">
              </el-table-column>
              <el-table-column
                prop="change"
                label="排名变化"
                align="center">
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="热点机构" name="agency">
            <el-table
              v-if="activeName === 'agency'"
              :data="tableAgencyData"
              stripe
              style="width: 100%"
              v-loading="loadingTwo">
              <el-table-column
                type="index"
                label="排名"
                :index="1">
              </el-table-column>
              <el-table-column
                prop="name"
                label="名称"
                align="center">
              </el-table-column>
              <el-table-column
                prop="num"
                label="全网信息量"
                align="center">
              </el-table-column>
              <el-table-column
                prop="change"
                label="排名变化"
                align="center">
              </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import api from '../api/api'
  import {mapState} from 'vuex'

  export default {
    name: "searchTable",
    data() {
      return {
        loading: false,
        keyword: '',
        keywordId: '',
        activeName: 'people',
        loadingOne: true,
        loadingTwo: true,
        tablePeopleData: [],
        tableAgencyData: []
      }
    },
    mounted() {
      this.setCurrent(this.options[0]);
      this.keyword = this.options[0].label;
      this.keywordId = this.options[0].value;
      this.getTableData(this.options[0].value)
    },
    computed: {
      ...mapState(['options'])
    },
    methods: {
      headerRow(row, rowIndex) {
        return {'background-color': '#0067F5', 'color': '#fff'}
      },
      handleCurrentClick(row) {
        this.keyword = row.label;
        this.keywordId = row.value;
        this.$nextTick(() => {
          this.loadingOne = true;
          this.loadingTwo = true;
          this.activeName = 'people';
          this.getTableData(this.keywordId)
        })
      },
      setCurrent(row) {
        this.$refs.singleTable.setCurrentRow(row);
      },
      getTableData(key) {
        api.HotPeople({keywordId: key, fromDateString: '', toDateString: ''})
          .then(res => {
            this.loadingOne = false;
            this.tablePeopleData = [];
            for (let i = 0; i < res.listPersonName.length; i++) {
              this.tablePeopleData.push({
                name: res.listPersonName[i],
                num: res.nerCountMap[res.listPersonName[i]],
                change: '--'
              })
            }
          });
        api.HotOrganization({keywordId: key, fromDateString: '', toDateString: ''})
          .then(res => {
            this.loadingTwo = false;
            this.tableAgencyData = [];
            for (let i = 0; i < res.listOrgName.length; i++) {
              this.tableAgencyData.push({
                name: res.listOrgName[i],
                num: res.nerCountMap[res.listOrgName[i]],
                change: '--'
              })
            }
          })
      }
    }
  }
</script>

<style>
  .search-table .el-tabs--border-card .el-tabs__content {
    padding: 0;
  }
</style>
